<!-- eslint-disable @typescript-eslint/no-empty-function -->
<!-- eslint-disable vue/no-unused-components -->
<template>
  <QfPage title="我是首页">
    <div>
      <el-carousel :interval="5000" height="36rem" @change="changeImg" indicator-position="outside">
        <el-carousel-item v-for="(item,index) in images" :key="index">
          <el-image
          :class="className"
           style="width:100%;
            height:100%" :src="item.idView"
             fit="fit"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
  </QfPage>

</template>
<script setup lang="ts">
import { useRoute } from 'vue-router';
import { reactive, ref } from 'vue';

// eslint-disable-next-line
const route = useRoute();
const images = reactive([
  // eslint-disable-next-line global-require, import/no-unresolved
  { id: 0, idView: require('https://img.tukuppt.com/photo-small/00/34/09/5a4328226c563.jpg') },
  // eslint-disable-next-line global-require, import/no-unresolved
  { id: 1, idView: require('https://img.tukuppt.com/photo-small/00/02/14/5a38aa2c4d9c5.jpg') },
  // eslint-disable-next-line
  { id: 2, idView: require('https://img.tukuppt.com/photo-small/00/18/79/5a5ae4863a9e7.jpg') },
  // eslint-disable-next-line global-require, import/no-unresolved
  { id: 3, idView: require('https://img.tukuppt.com/photo-small/00/11/37/5a3e01c2ad244.jpg') },
  // eslint-disable-next-line global-require, import/no-unresolved
  { id: 4, idView: require('https://img.tukuppt.com/photo-small/00/20/63/5a59757e8d411.jpg') },
]);
</script>
<script lang="ts">

export default {
  name: 'homePage',
};
</script>
<style scoped>
.lun-img {
  transition: all 4s;
  transform: scale(1.5);
}

.lun-img-two {
  transform: scale(1);
}

.el-carousel__item.is-animating {
  transition: transform 1s ease-in-out;
}
</style>
